<template>
	<view class="prom-bar-container">
        <custom-price :price="price" :size="50" :textColor="'#FFFFFF'"></custom-price>
        <view class="msg">
            <view class="text">
                <text class="old-price">{{ oldprice | unitPrice('￥') }}</text>
            </view>
            <view class="text">
                <text class="icon" :class="[type]">{{ title }}</text>
            </view>
        </view>
        <view class='count-down'>
            <view class='count-down-text'>距离结束还剩</view>
            <view class='count-down-times'>
                <text v-if="day > 0" class="day">{{day}}天</text>
                <text class='time'>{{hours}}</text>:
                <text class='time'>{{minutes}}</text>:
                <text class='time'>{{seconds}}</text>
            </view>
        </view>
	</view>
</template>

<script>
    /**
     * 商品详情页团购、限时抢购组件
     *
     * ===== 使用场景 ======
     * 商品详情页。
     *
     * ===== 参数 =====
     * type      活动类型
     * title     活动标题
     * price     价格
     * oldprice  原价
     * endtime   结束时间
     */
    import { Foundation } from '@/ui-utils/index.js'
	export default {
		data() {
			return {
                timer:null,
                day:0,
                hours:'00',
                minutes:'00',
                seconds:'00',
			};
		},
        props: {
            type: {
                type: String,
                default: ''
            },
            title: {
                type: String,
                default: ''
            },
            price: {
                type: Number,
                default: 0,
            },
            oldprice: {
                type: Number,
                default: 0,
            },
            endtime: {
                type: [Number,String],
                default: 0,
            }
        },
        mounted() {
            this.contDown(this.endtime)
        },
        methods: {
            contDown(times) {
                let end_ime = times
                this.timer = setInterval(() => {
                  if (end_ime <= 0) {
                    clearInterval(this.timer)
                    this.$emit('count-end')
                  } else {
                    const time = Foundation.countTimeDown(end_ime)
                    this.day = parseInt(time.day)
                    this.hours = time.hours
                    this.minutes = time.minutes
                    this.seconds = time.seconds
                    end_ime--
                  }
                }, 1000)
            }
        },
        destroyed() {
            clearInterval(this.timer)
        }
	}
</script>

<style lang="scss" scoped>
    .prom-bar-container {
        position: relative;
        display: flex;
        align-items: center;
        z-index: 10;
        height: 49px;
        color: #fff;
        background: url(../../static/images/background-promotion-bar.png) no-repeat,-webkit-linear-gradient(top,#fc5997,#ef4747);
        background-size: 259px,100%;
        .prom-price {
          margin: 0 10px;
          font-size: 14px;
          font-weight: 700;
          em {
            font-size: 24px;
          }
        }
        .msg {
          flex: 1;
          font-size: 12px;
          margin-left: 20rpx;
          .old-price {
              text-decoration: line-through;
          }
          .icon {
            position: relative;
            display: inline-block;
            margin: -2px 3px 0 0;
            padding: 0 3px 0 18px;
            height: 15px;
            vertical-align: middle;
            line-height: 15px;
            font-size: 10px;
            &.seckill::before {
              background: #fff url() no-repeat 50%;
              background-size: 12px
            }
            &.groupbuy::before {
              background: #fff url() no-repeat 50%;
              background-size: 12px
            }
            &::before {
              content: "";
              position: absolute;
              left: 0;
              top: 0;
              width: 15px;
              height: 15px;
              border-top-left-radius: 1px;
              border-bottom-left-radius: 1px;
            }
            &::after {
              content: "";
              display: block;
              border: 1px solid #fff;
              position: absolute;
              top: 0;
              left: 0;
              pointer-events: none;
              bottom: 0;
              right: 0;
              border-radius: 2px;
            }
          }
        }
        .count-down {
          position: absolute;
          right: 0;
          top: 0;
          min-width: 116px;
          height: 100%;
          text-align: center;
          background-color: #f8f8f8;
          .count-down-text {
            margin: 5px 0 2px;
            font-size: 10px;
            color: #666;
          }
          .count-down-times {
            font-size: 14px;
            color: #ff5000;
          }
          .time {
            display: inline-block;
            margin: 0 1px;
            width: 23px;
            height: 21px;
            font-weight: 700;
            color: #fff;
            background-color: #ff5000;
          }
          .day {
            font-size: 12px;
          }
        }
      }
</style>
